<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问卷星</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				width: 100vw;
				height: 100vh;
				background: url('img/bacg.jpg') center/100% 100% no-repeat fixed;
			}
			.logo{
				position: absolute;
				top: 50px;
				left: 30px;
			}
			.R-box{
				position: absolute;
				top: 50px;
				right: 30px;
			}
			.R-box a{
				display:inline-block;
				width: 80px;
				height: 30px;
				border: 1px solid #FFF;
				border-radius: 10px;
				text-align: center;
				line-height: 30px;
				font-size: 20px;
				color: #FFF;
				text-decoration: none;
			}
			.R-box .home{
				width: 100px;
				margin-left: 10px;
			}
			.login-main{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 460px;
				height: 500px;
				background: #FFF;
				border-radius: 20px;
			}
			.login-li{
				width: 400px;
				height: 46px;
				/* border: 1px solid red; */
				margin: 7px auto;
				line-height: 46px;
				text-align: left;
			}
			.login-li h2{
				color:  #fa911e;
				font-size: 26px;
			}
			.li-border{
				border: 1px solid #CCC;
				border-radius: 15px;
			}
			.icon{
				margin-left:5px;
				vertical-align: middle;
			}
			.input{
				border: 0;
				outline: none;
				font-size: 16px;
				margin-left: 5px;
			}
			.user-psd{
				float: right;
				color: black;
				font-size: 14px;
			}
			.login-input{
				width: 400px;
				height: 46px;
				border-radius: 15px;
				background-color: #fa911e;
				border: 0;
				color: #FFF;
				font-size: 24px;
			}
			.re-input{
				width: 400px;
				height: 46px;
				background-color: #FFF;
				color:#fa911e;
				font-size: 24px;
				border: 0;
			}
			.other{
				padding: 0 5px;
			}
			/* 默认是行内元素 */
			.other:before,.other:after{
				content: "";
				display: inline-block;
				width: 135px;
				height: 1px;
				background-color: #ccc;
			}
			.login-center{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<img src="img/logo.png" class="logo" />
		<div class="R-box">
			<a href="#">注册</a>
			<a href="#" class="home">返回首页</a>
		</div>
		<div class="login-main">
			<div class="login-li">
				<h2>问卷星登录</h2>
			</div>
			<form>
				<div class="login-li li-border">
					<img src="img/user.png" class="icon" />
					<input type="text" placeholder="用户名/E-main/手机" class="input" />
				</div>
				<div class="login-li li-border">
					<img src="img/password.png" class="icon" />
					<input type="password" placeholder="请输入登录密码" class="input" />
				</div>
				<div class="login-li">
					<input type="checkbox" /><span>下次自动登录</span>
					<a href="#" class="user-psd">忘记用户名/密码？</a>
				</div>
				<div class="login-li">
					<input type="button" value="登录" class="login-input"/>
				</div>
				<div class="login-li">
					<input type="button" value="立即注册" class="re-input" />
				</div>
				<div class="login-li login-center">
					<span class="other">第三方登录</span>
				</div>
			</form>
		</div>
	</body>
</html>
